<template>
	<div id="app">
		<Header :addData='addData' />
		<Items :items='items' />
		<Footer v-if="items.length"/>
	</div>
</template>

<script>
	import Footer from './components/Footer.vue'
	import Header from './components/MyHeader.vue'
	import Items from './components/Items.vue'

	export default {
		name: 'app',
		components: {
			Footer,
			Header,
			Items,
		},
		data() {
			return {
				items: []
			};
		},
		methods: {
			addData(v) {
				v.id = this.items.length + 1;
				this.items.unshift(v)
			},
			delData(itemId) {
				this.items = this.items.filter((item) => {
					return item.id !== itemId;
				})
			},
			handlCheck(itemId) {
				this.items.forEach(function(item) {
					if (item.id === itemId) {
						item.isFinish = !item.isFinish
					}
				})
			},
			clearData() {
				this.items = []
			}
		},
		mounted() {
			this.$bus.$on('delData', (itemId) => {
				this.delData(itemId)
			})
			this.$bus.$on('handlCheck', (itemId) => {
				this.handlCheck(itemId)
			})
			this.$bus.$on('claerData', () => {
				console.info('111')
				this.clearData()
			})
			this.$bus.$emit('items',this.items)
		},
		watch:{
			items:{
				handler(n,o){
					this.$bus.$emit('items',this.items)
				},
				deep:true
			}
		}
	}
</script>

<style>
	#app {
		color: #2c3e50;
		margin-top: 60px;
		display: flex;
		flex-direction: column;
	}
</style>
